<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon"
          href="/public/image/logo.PNG"
          mce_href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
          type="image/x-icon"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
    <script src="/public/js/vue.js"></script>
    <title>建规学院意见反馈</title>
</head>
<body>
<div id="adminApp">
    <header class="header">
        <div class="title" @click="refresh">
            <img class="logo" src="/public/image/logo.PNG" alt="logo">
            <span>
                <h3 style="color: #585858">后台管理</h3>
            </span>
        </div>
        <div class="tools">
            <div>
                <label>从：
                    <input type="datetime-local" v-model="beforeDate" @change="changeTime">
                </label>
                <label>到：
                    <input type="datetime-local" v-model="afterDate" @change="changeTime">
                </label>
                <button @click="searchWithTime">查询</button>
            </div>
        </div>
    </header>
    <main class="main" @scroll="scrollEvent">
        <template v-if="feedbackList.length">
            <div class="feedback_card"
                 v-for="item in feedbackList"
                 :key="item.feedbackId"
                 @click="getFeedbackContent(item)">
                <img  class="feedback_image" alt="image"
                      v-if="item.feedbackImageUrl !== 'null'"
                      :src="item.feedbackImageUrl"
                      :ref="item.feedbackId"
                      @click.stop="showImg($refs[item.feedbackId])">
                <div class="feedback_content">
                    <div class="feedback_text">{{item.feedbackContent | strLen}}</div>
                    <div class="feedback_time">{{item.feedbackTime}}</div>
                </div>
            </div>
        </template>
        <div v-else>
            还没有提交过反馈
        </div>
    </main>
    <footer class="footer"></footer>
</div>
<!--查看大图-->
<div class="result" id="outdiv">
    <div class="indiv">
        <img class="imgresult" id="bigimg" src="" alt="">
    </div>
</div>
<script>

    window.onload = function (){
        /* 进入首页token验证 */
        const token = localStorage.getItem("adminToken")
        if (!token) location.href = "/public/admin/login.html"
        new Vue({
            el:"#adminApp",
            data:{
                feedbackList:[],
                pageNum: 1,
                pageSize: 15,
                beforeDate:"",
                afterDate:"",
                timer: null
            },
            mounted(){
                this.getFeedbackList()
            },
            methods: {
                getFeedbackContent(feedback){
                    sessionStorage.setItem("nowFeedback",JSON.stringify(feedback))
                    sessionStorage.setItem("nowRole","1")
                    location.href = "/public/admin/feedbackContent.html"
                },
                searchWithTime(){
                    const {beforeDate,afterDate} = this
                    if (!beforeDate||!afterDate) return alert("时间不能为空")
                    this.pageNum = 1
                    this.feedbackList = []
                    this.getFeedbackList()
                },
                refresh(){
                    location.reload()
                },
                // 滚动事件
                scrollEvent(e) {
                    const {scrollTop, offsetHeight, scrollHeight} = e.target
                    // 判断是否触底
                    if (scrollTop + offsetHeight >= scrollHeight - 10) {
                        //防抖节流
                        clearInterval(this.timer)
                        this.timer = setTimeout(() => {
                            console.log("触底")
                            this.getFeedbackList()
                        }, 500)

                    }
                },
                getFeedbackList(){
                    const that = this
                    const {
                        pageNum,
                        pageSize,
                        afterDate,
                        beforeDate
                    } = that

                    $.ajax('/admin/getFeedbackListByPage', {
                        method: "post",
                        // contentType: false,
                        processData: false,
                        data: `pageNum=${pageNum}&pageSize=${pageSize}&beforeDate=${beforeDate}&afterDate=${afterDate}`,
                        headers:{
                            "Authorization": `Bearer ${localStorage.getItem("adminToken")}`
                        },
                        success: function (result) {
                            const {data,code} = result
                            if (code === 200){
                                that.pageNum++
                                data.map(item => {
                                    that.feedbackList.push({
                                        feedbackId: item['feedback_id'],
                                        feedbackContent: item['feedback_content'],
                                        feedbackImageUrl: item['feedback_image_url'],
                                        /* 时间格式化处理 */
                                        feedbackTime: item['feedback_time'].replace(/T|.[\dA-Z]{4}$/g," ")
                                    })
                                })
                            }else{
                                alert(result.msg)
                            }

                        },
                        error: function () {
                            alert("发生错误，请联系管理员")
                            sessionStorage.clear()
                            localStorage.clear()
                            location.href = "/admin/login.html"
                        }
                    })
                },
                changeTime(){
                    if (new Date(this.beforeDate) > new Date(this.afterDate)){
                        this.afterDate = ""
                        return alert("时间区间错误")
                    }
                },
                showImg(thisElement) {
                    const winW = $(window).width();
                    const winH = $(window).height();
                    const src = $(thisElement).attr('src');
                    $("#bigimg").attr("src", src);
                    $("<img/>").attr("src", src).load(function () {
                        const imgW = thisElement.width / 2;
                        let imgH = thisElement.height / 2;
                        const scale = imgW / imgH;
                        if (imgW > winW) {
                            $("#bigimg").css("width", "100%").css("height", "auto");
                            imgH = winW / scale;
                            const h = (winH - imgH) / 2;
                            $(".indiv").css({"left": 0, "top": h});
                        } else {
                            $("#bigimg").css("width", imgW + 'px').css("height", imgH + 'px');
                            const w = (winW - imgW) / 2;
                            const h = (winH - imgH) / 2;
                            $(".indiv").css({"left": w, "top": h});
                        }
                        const outDiv = $("#outdiv")
                        outDiv.fadeIn("fast");
                        outDiv.click(function () {
                            $(this).fadeOut("fast");
                        });
                    });
                }
            },
            filters:{
                strLen(str,len=170){
                    let newStr = str
                    if (newStr.length > len){
                        newStr = newStr.slice(0,len) + "..."
                    }
                    return newStr
                }
            }
        })
    }



</script>
</body>
</html>
